<template>
  <div>
    <van-popup v-model:show="pwdopen" position="bottom" closeable close-icon="cross"
      :style="{ height: '100%', background: ' rgba(0, 0, 0, .5)' }" close-icon-position="top-right">
      <!-- 密码输入框 -->
      <div class="pwd-model">
        <van-password-input :value="formData.pasteResult" :focused="formData.showKeyboard"
          @focus="formData.showKeyboard = true" info="请输入交易密码" />
        <!-- <van-button round type="primary">确认</van-button> -->
        <div class="tips">成功输入交易密码后即交易成功</div>
      </div>
      <!-- 数字键盘 -->
      <van-number-keyboard v-model="formData.pasteResult" :show="formData.showKeyboard"
        @blur="formData.showKeyboard = false" @input="onInput" />
    </van-popup>
  </div>
</template>
<script>
import { defineComponent, ref, reactive, toRefs } from 'vue'
import { getCode, imgcode, loginByPhone } from "@/api/user";
import { shopping, shoppingPay, setSell, participateDraw, Goauction, collectionAuctionOrder, collectionAuctionCancel } from "@/api/public";
import { useStore } from "vuex";
import { useRouter } from "vue-router"
import { setLocal } from "@/utils/localStorage";
import { Popup, Toast } from "vant";
import { stringNum } from "@/utils/phone";
export default defineComponent({
  watch: {
    paydata: {
      handler(val) {
      }
    }
  },
  components: {
    Popup
  },
  props: {
    paydata: {
      type: Object,
      default: ''
    }
  },
  setup(props, context) {
    const store = useStore()
    const router = useRouter()
    const paydata = toRefs(props).paydata
    const pwdopen = ref(false)
    const formData = reactive({
      pasteResult: '',
      showKeyboard: true,
      sendBtnText: "60秒后获取验证码",
    })
    function fnxx() {
      context.emit('update:load');
    }
    const onInput = (key) => {
      formData.pasteResult = (formData.pasteResult + key).slice(0, 6);
      let str = stringNum(formData.pasteResult)
      if (stringNum(formData.pasteResult) === 6) {
        formData.showKeyboard = false
        pwdopen.value = false
        const data = {
          purchaseId: paydata.value.id,
          applyId: paydata.value.applyId,
          number: paydata.value.PayNum,
          useSellId: paydata.value.useSellId
        }
        if (paydata.value.type == 1) {
          shopping(data).then(res => {
            if (res.data.success) {
              formData.orderCode = res.data.data
              shoppingPay(formData.orderCode, formData.pasteResult, paydata.value.useSellId).then(e => {
                console.log(e.data.success)
                if (e.data.success) {
                  Toast('购买成功')
                  // router.push('/order')
                  router.back()
                  formData.pasteResult = ''
                } else {
                  Toast(e.data.message)
                  formData.pasteResult = ''
                }
                formData.tips = "输入交易密码"
                formData.pasteResult = ""
                formData.repaypwd = ""
                formData.paywarp = true
                formData.repaywarp = false
                formData.showKeyboard = true
                formData.reshowKeyboard = false
                formData.loading = false
              })
            } else {
              formData.pasteResult = ''
              Toast(res.data.message)
              if (res.data.message == '请先实名认证') {
                router.push('/realName')
                return false
              }
              if (res.data.message == '请设置支付密码') {
                router.push('/editPwd')
                return false
              }
            }
          })

        }
        if (paydata.value.type == 10) {
          shopping({ blindBoxId: paydata.value.id }).then(res => {
            if (res.data.success) {
              formData.orderCode = res.data.data
              shoppingPay(formData.orderCode, formData.pasteResult, paydata.value.useSellId).then(e => {
                if (e.data.success) {
                  console.log("购买成功")
                  Toast('购买成功')
                  // router.push('/order')
                  router.back()
                  formData.pasteResult = ''
                } else {
                  Toast(e.data.message)
                  formData.pasteResult = ''
                }
                formData.tips = "输入交易密码"
                formData.pasteResult = ""
                formData.repaypwd = ""
                formData.paywarp = true
                formData.repaywarp = false
                formData.showKeyboard = true
                formData.reshowKeyboard = false
                formData.loading = false
              })
            } else {
              formData.pasteResult = ''
              Toast(res.data.message)
              if (res.data.message == '请先实名认证') {
                router.push('/realName')
                return false
              }
              if (res.data.message == '请设置支付密码') {
                router.push('/editPwd')
                return false
              }
            }
          })
        }
        if (paydata.value.type == 3) {
          formData.orderCode = paydata.value.orderCode
          shoppingPay(formData.orderCode, formData.pasteResult, paydata.value.useSellId).then(e => {
            console.log(e.data.success)
            if (e.data.success) {
              console.log("购买成功")
              Toast('购买成功')
              formData.pasteResult = ''
              location.reload()
            } else {
              Toast(e.data.message)
              formData.pasteResult = ''
            }
            formData.tips = "输入交易密码"
            formData.pasteResult = ""
            formData.repaypwd = ""
            formData.paywarp = true
            formData.repaywarp = false
            formData.showKeyboard = true
            formData.reshowKeyboard = false
            formData.loading = false
          })
        }
        if (paydata.value.type == 5) {
          const parmar = {
            applyId: paydata.value.id,
            payPassword: formData.pasteResult,
          }
          participateDraw(parmar).then(async res => {
            if (res.data.success) {
              Toast('申购成功')
              formData.pasteResult = ''
              router.back()
              // onload()
            } else {
              Toast(res.data.message)
              formData.pasteResult = ''
              // router.back()
            }
            formData.tips = "输入交易密码"
            formData.pasteResult = ""
            formData.repaypwd = ""
            formData.paywarp = true
            formData.repaywarp = false
            formData.showKeyboard = true
            formData.reshowKeyboard = false
            formData.loading = false
          })
        }
        if (paydata.value.type == 0) {
          const paydata = toRefs(props).paydata
          const parmar = {
            userCollectionId: paydata.value.id,
            amount: paydata.value.price,
            payPassword: formData.pasteResult,
            number: 1,
            day: 1
          }
          setSell(parmar).then(async res => {
            if (res.data.success) {
              Toast('出售成功')
              formData.pasteResult = ''
              router.back()
              // onload()
            } else {
              Toast(res.data.message)
              formData.pasteResult = ''
            }
            formData.tips = "输入交易密码"
            formData.pasteResult = ""
            formData.repaypwd = ""
            formData.paywarp = true
            formData.repaywarp = false
            formData.showKeyboard = true
            formData.reshowKeyboard = false
            formData.loading = false
          })
        }
        if (paydata.value.type == 2) {
          const data = {
            userCollectionId: paydata.value.id,
            collectionId: paydata.value.collectionId,
            userBidDuration: paydata.value.time,
            startPrice: paydata.value.price
          }
          formData.showKeyboard = false
          Goauction(data).then(async res => {
            if (res.data.success) {
              Toast('上架成功')
              formData.repaypwd = ""
              setTimeout(() => {
                router.push({
                  path: '/gift',
                })
              }, 500);
            } else {
              formData.repaypwd = ""
            }
          })
        }
        if (paydata.value.type == 4) {
          const data = {
            bidId: paydata.value.id,
            price: paydata.value.amount,
            payPassword: formData.pasteResult
          }
          formData.showKeyboard = false
          collectionAuctionOrder(data).then(async res => {
            if (res.data.success) {
              Toast('提交成功')
              formData.repaypwd = ""
              setTimeout(() => {
                router.push({
                  path: '/market',
                })
              }, 500);
            } else {
              formData.repaypwd = ""
            }
          })
        }
        if (paydata.value.type == 6) {
          collectionAuctionCancel(paydata.value.id).then((res) => {
            if (res.data.status == 200) {
              Toast('取消成功')
              formData.repaypwd = ""
              setTimeout(() => {
                router.push({
                  path: '/gift',
                })
              }, 500);
            } else {
              formData.repaypwd = ""
            }
          })
        }
      }
    }
    return {
      pwdopen,
      onInput,
      formData,
      //phone
    }
  }
})
</script>
<style lang="less" scoped>
.pwd-model {
  position: relative;
  width: 560px;
  height: 230px;
  background: #282a2c;
  border: 1px solid #ffffff;
  border-radius: 13px;
  margin: 250px auto 0px;
  padding-top: 160px;

  .tips {
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: #bac5c8;
    width: 454px;
    line-height: 40px;
    margin: 20px auto;
    text-align: center;
  }

  &:deep(.van-button) {
    margin: 40px 50px 0px;
    border: none;
    font-size: 32px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #ffffff;
    width: 448px;
    height: 80px;
    background: linear-gradient(-90deg, #37dc6d, #34d1f9);
  }

  &:deep(.van-password-input__security i) {
    background: #bac5c8;
  }

  &:deep(.van-password-input__item) {
    background: #282a2c;
    color: #ffffff;
  }

  &:deep(.van-password-input__info) {
    position: absolute;
    font-size: 30px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    line-height: 30px;
    top: -100px;
    left: 140px;
  }
}
</style>